<template>
	<view class="safety storesTransfer">

		<view class=" topHeaderBox between navBox" :style="{paddingTop: `${systemBarHeight+10}px`}">
			<image class="backIcon" src="https://wx.2024csnl.com/static/mine/back.png" @click="goBack(100)"></image>
			<view>限时秒杀</view>
			<view></view>
		</view>
		<!-- 主要内容区 -->
		<view class="mainBox" :style="{paddingTop:`${systemBarHeight+49}px`}">
			<view class="mainHeader">
				<!-- 时间进度列表 -->
				<view class="headerBox between">
					<view class="oneTime flex-center" :class="{'activeOneTime':selectIdx==i}"
						v-for="(item,i) in timeList" :key="i">
						<view @click="getSecondKillTimeGoods(item.starttime,i)">
							<view class="headTime">{{item.status==1?item.text: item.timetext}}</view>
							<view class="text">{{item.status==1? item.timetext:item.text}}</view>
						</view>
					</view>
				</view>
				<view class="between headerTitBox">
					<view>好物低价 先抢先得</view>
					<view class="flex"><text style="margin-right: 30rpx;" v-if="starttime!=''">
							{{state==0?'距开始时间':'距结束时间'}}</text>
						<countdown :downTime="getDownTime()" background="#F3E00E" fontColor="#333333" lineHeight="40"
							fontSize="27"></countdown>
					</view>
				</view>
				<!-- 列表 -->
				<view class="listBigBox">
					<view class="record-item flex" v-for="(item,index) in goodsList" :key="index">
						<image :src="item.pic" mode="aspectFill" class="record-img" />
						<view class="">
							<view class="record-name">{{item.name}}</view>
							<view class="info-price">
								<text style="color: #333;">￥</text>
								<text class="price">{{item.sell_price}}</text>
								<text class="original-price">￥{{item.market_price}}</text>
							</view>
							<view class="nums">
								库存{{item.sales}}/{{item.stock}}
							</view>
						</view>
						<view class="btn flex-center" v-if="item.type==0&&state==1">已抢光</view>
						<view class="btn flex-center" v-if="item.type==1&&state==1"
							style="background: #41644A;color: #fff;"
							@click="onSkip(`/business/pages/business_tab/seckillGoodsDetails?id=${item.id}`)">立即抢购
						</view>
					</view>
				</view>

			</view>
		</view>
	</view>
</template>

<script>
	import countdown from '@/components/countdown.vue'
	import {
		secondKillTime,
		secondKillTimeGoods
	} from "@/api/index.js"
	export default {
		components: {
			countdown
		},
		data() {
			return {
				starttime: '', //开始时间
				endtime: '', //结束时间
				state: null, //返0=未开始（倒计时取开始时间），1=进行中（倒计时取结束时间），2=已结束
				selectIdx: null, //选取时间段
				timeList: [],
				goodsList: [],
				systemBarHeight: getApp().globalData.systemBarHeight,
				bid: null,
			}
		},
		onLoad(opt) {
			this.bid = opt.bid
			this.getSecondKillTime()
		},
		methods: {
			getDownTime() {
				const times = this.state == 1 ? this.endtime : this.starttime
				// console.log(times, "aaa")
				return times
			},
			// 商品
			async getSecondKillTimeGoods(time, i) {
				this.selectIdx = i
				const res = await secondKillTimeGoods(
					`s=/ApiSeckill/dayproductlist&bid=${this.bid}&starttime=${time}`)
				const {
					data,
					status,
					starttime,
					endtime,
					state,
					msg,
				} = res.data
				// console.log(res, "111")
				if (status == 1) {
					this.starttime = starttime
					this.endtime = endtime
					this.state = state
					this.goodsList = data
				} else {
					this.showToast(msg)
				}
			},
			// 时间段
			async getSecondKillTime() {
				const res = await secondKillTime(`s=/ApiSeckill/dayproduct&bid=${this.bid}`)
				const {
					data,
					status,
					msg,
				} = res.data
				// console.log(res, "111")
				if (status == 1) {
					this.timeList = data
					this.timeList.forEach((item, i) => {
						if (item.status == 1) {
							this.selectIdx = i
						}
					})
					if (this.selectIdx == null) {
						this.selectIdx = this.timeList.length - 1
					}
					if (this.timeList.length != 0) {
						this.getSecondKillTimeGoods(this.timeList[this.selectIdx].starttime, this.selectIdx)
					} else {
						this.showToast('暂无秒杀~')
						this.goBack(2000)
					}
				} else {
					this.showToast(msg)
				}

			},
		},
	}
</script>

<style lang="scss" scoped>
	.storesTransfer {
		background: #F7F7F7;
		min-height: 100vh;
	}

	.listBigBox {
		height: 79vh;
		overflow: auto;
		margin-top: -40rpx;

		.record-item {
			position: relative;
			margin: 20rpx;
			background-color: #FFF;
			padding: 27rpx 20rpx;
			font-size: 24rpx;
			border-radius: 20rpx;

			.btn {
				color: #999999;
				position: absolute;
				right: 30rpx;
				bottom: 40rpx;
				background: #E6E6E6;
				width: 155rpx;
				border-radius: 15rpx;
				font-size: 30rpx;
				height: 70rpx;

			}

			.record-img {
				width: 160rpx;
				height: 160rpx;
				border-radius: 13rpx;
				margin-right: 24rpx;
			}

			.record-name {
				font-size: 29rpx;
				font-weight: bold;

			}

			.info-price {
				color: #FF0404;
				margin: 32rpx 0;
			}

			.price {
				font-size: 40rpx;
				font-weight: bold;
			}

			.nums {
				color: #999999;
			}

			.original-price {
				color: #999999;
				text-decoration: line-through;
				margin-left: 8rpx;
			}

		}
	}



	.mainHeader {
		height: 300rpx;
		background: linear-gradient(90deg, #F85E91, #41644A);

		.headerBox {
			padding: 35rpx 0;
			overflow: auto;
			border-bottom: 8rpx solid #FFB3C6;
			color: #fff;

			.oneTime {
				text-align: center;
				flex-direction: column;
				font-size: 30rpx;

				.headTime {
					width: 25vw;
					font-weight: bold;
					margin-bottom: 10rpx;
				}

				.text {
					font-weight: 300;
				}
			}

			.activeOneTime {
				color: #F3E00E;
			}

		}

		.headerBox::-webkit-scrollbar {
			display: none
		}
	}

	.headerTitBox {
		padding: 30rpx 40rpx 60rpx;
		color: #fff;
		font-size: 28rpx;
	}

	.topHeaderBox {
		// #ifdef APP-PLUS
		padding: 30rpx;
		// #endif
		// #ifdef H5
		padding: 30rpx;
		// #endif
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		z-index: 99999;
		display: flex;
		background: linear-gradient(90deg, #F85E91, #41644A);

	}

	.navBox {
		font-size: 34rpx;
		font-weight: bold;
		color: #fff;
	}

	.backIcon {
		width: 21rpx;
		height: 37rpx;
	}
</style>